<template>
	<view class="wrap" :style="colorStyle">
		<u-popup :show="show" @close="close" @open="open">
			<view class="user_box">
				<view class="title flex_s">
					<view class="logo_box">
						<image src="@/static/logo.png" mode="aspectFill"></image>
					</view>
					<text>金小度换购</text>
				</view>
				<view class="sub_title">
					申请获取并验证你的手机号
				</view>
				
				<view class="btn_box">
					<button class="btn allow permits" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber">
						绑定手机号
					</button>
					<view class="btn no_allow" @click="close">
						拒绝
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import colors from "@/mixins/color.js"
	import {
		phone
	} from "@/api/user";
	export default {
		mixins: [colors],
		name: "eidtUserModal",
		data() {
			return {
				show: false,
				userinfo:{
					headimg:'',
					nickname:''
				}
			};
		},
		methods: {
			open() {
				this.show=true
			},
			close() {
				this.show = false
			},
			getPhoneNumber(e) { //获取手机号
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					this.bindPhone(e.detail);
			
				} else {
					return
				}
			},
			async bindPhone(res) { //此乃绑定手机号
				phone({
					encryptedData: res.encryptedData,
					iv: res.iv,
					code: res.code
				}).then((res) => {
					const data = res.data
					this.close()
					this.$u.toast("绑定成功");
					uni.setStorageSync('phone', data)
					// uni.setStorageSync('LOGIN_STATUS_TOKEN', data.data.token.token)
			
					uni.navigateBack()
				})
			},
			
			confirm(){
				this.close()
				this.$emit('confirm',this.userinfo)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		.user_box{
			color: #1C1C1C;
			width: 750rpx;
			// height: 781rpx;
			padding: 48rpx;
			.title{
				
				font-size: 30rpx;
				font-weight: 700;
				margin-bottom: 45rpx;
				.logo_box{
					width: 58rpx;
					height: 58rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 10rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.sub_title{
				font-size: 36rpx;
				margin-bottom: 60rpx;
			}
			.form_box{
				margin-bottom: 126rpx;
				.form_item{
					height: 117rpx;
					border-bottom: 2rpx solid #E5E5E5;
					.left{
						margin-right: 40rpx;
						font-size: 30rpx;
					}
					.right{
						.avatar_box{
							width: 83rpx;
							height: 83rpx;
							border-radius: 50%;
							overflow: hidden;
							background: #CCCCCC;
							image{
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
			.btn_box{
				.btn{
					width: 670rpx;
					height: 128rpx;
					line-height: 128rpx !important;
					text-align: center;
					margin: 0 auto;
					border-radius: 8rpx;
					overflow: hidden;
					font-size: 30rpx;
					font-weight: 700;
					
				}
				.allow{
					color: var(--view-theme);
					background: #E8F2FE;
				}
				.no_allow{
					color: #606E92;
					
				}
			}
		}
	}
</style>